var React  = require('react');
import  $ from 'jquery'
import './Album.css';
var NavLink=require('../modules/NavLink');

export default class ListItem extends React.Component {
    constructor(props){
        super(props)
        this.state={
            lists:[]
        }
    } 
    render(){
        const listShows = this.state.lists.map((list,index)=>{
            return <li className="playlist__item">
                      <div className="playlist__item_box">
		                    <div className="playlist__cover mod_cover">
                                <NavLink to={`/Detail/${list.song_id}`} className="js_album">
                                  <img id={index} src={list.pic_big} className="playlist__pic"/>
                                  <i className="play_icon"></i>
                                </NavLink>
                                
                            </div>
		                    <h4 className="playlist__title">
                                
                                {list.title}
                            </h4>
		                    <div className="playlist__author">
				                <a href="##" className="js_singer" style={{color:'#333'}}>
                                  {list.author}  
                                </a>	
		                    </div>
                            <div className="playlist__other">
                                 {list.publishtime} 
                            </div>
	                    </div>
                    </li> 
        })
        return(
            <div className="mod_playlist mod_playlist--all"> 
                <ul className="playlist__list">
                {listShows}
                </ul>
            </div>
        )
    }
    componentDidMount(){
        var that = this;
        $.ajax ({  
        type:"GET",  
        url:'http://tingapi.ting.baidu.com/v1/restserver/ting?format=json&calback=&from=webapp_music&method=baidu.ting.billboard.billList&type=2&size=20&offset=0',  
        dataType:"jsonp",    
        success: function(data){      
            var arr=data;
            that.setState({
                    lists : arr.song_list
                }) 
            }  
        });  
    
    }
}
